<template>
    <!-- 搜索结果 -->
    <div class="search_result">
        <div class="search_nav">
            <div class="nav_info">
                <div :class="isOrders || ordersActive != -1 ? 'active' : ''">默认排序</div>
                <div class="iconfont icon-xia" @click.stop="showOrders"></div>
                <ul v-if="isOrders">
                    <li :class="ordersActive == -1 ? 'active' : ''" @click.stop="changeOrdersAll">
                        默认排序
                    </li>
                    <li
                        v-for="(item, index) in AllLabel.orders"
                        :key="item.name + 1"
                        :class="ordersActive == index ? 'active' : ''"
                        @click.stop="changeOrders(index, item.id)"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>
            <div class="nav_info">
                <div :class="isStyles || stylesActive != -1 ? 'active' : ''">全部分类</div>
                <div class="iconfont icon-xia" @click.stop="showStyles"></div>
                <ul v-if="isStyles">
                    <li :class="stylesActive == -1 ? 'active' : ''" @click.stop="changeStylesAll">
                        全部
                    </li>
                    <li
                        v-for="(item, index) in AllLabel.styles"
                        :key="item.name + 2"
                        :class="stylesActive == index ? 'active' : ''"
                        @click.stop="changeStyles(index, item.id)"
                    >
                        {{ item.name }}
                    </li>
                </ul>
            </div>
            <div class="nav_info">
                <div
                    :class="
                        isThress || areasActive != -1 || statusActive != -1 || pricesActive != -1
                            ? 'active'
                            : ''
                    "
                >
                    筛选
                </div>
                <div class="iconfont icon-xia" @click.stop="showThress"></div>
                <div v-if="isThress">
                    <ul class="areas">
                        <li :class="areasActive == -1 ? 'active' : ''" @click.stop="changeAreaAll">
                            全部
                        </li>
                        <li
                            v-for="(item, index) in AllLabel.areas"
                            :key="item.name + 3"
                            :class="areasActive == index ? 'active' : ''"
                            @click.stop="changeArea(index, item.id)"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                    <ul class="status">
                        <li
                            :class="statusActive == -1 ? 'active' : ''"
                            @click.stop="changeStatusAll"
                        >
                            全部
                        </li>
                        <li
                            v-for="(item, index) in AllLabel.status"
                            :key="item.id"
                            :class="statusActive == index ? 'active' : ''"
                            @click.stop="changeStatus(index, item.id)"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                    <ul class="prices">
                        <li
                            :class="pricesActive == -1 ? 'active' : ''"
                            @click.stop="changePricesAll"
                        >
                            全部
                        </li>
                        <li
                            v-for="(item, index) in AllLabel.prices"
                            :key="item.id"
                            :class="pricesActive == index ? 'active' : ''"
                            @click.stop="changePrices(index, item.id)"
                        >
                            {{ item.name }}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div v-if="searchClassify.length > 0" class="result_item">
            <router-link
                tag="div"
                class="search_content"
                :to="`/details/${item.id}`"
                v-for="(item, index) in searchClassify"
                :key="index"
            >
                <div class="left">
                    <van-image
                        radius="5px"
                        width="21vw"
                        height="28vw"
                        lazy-load
                        fit="cover"
                        :src="`${item.vertical_cover}@100w.jpg`"
                    />
                </div>
                <div class="right" v-if="item">
                    <h3 v-html="item.title"></h3>
                    <div class="right_xia">
                        <div class="name" v-for="(name, i) in item.author_name" :key="i">
                            <div v-html="name"></div>
                        </div>
                        <br />
                        <span v-for="styles in item.styles" :key="styles">{{ styles }}</span
                        ><br />
                        <span>{{ item.is_finish == 0 ? "连载中" : "已完结" }}</span>
                    </div>
                </div>
            </router-link>
        </div>
        <div class="loading" v-if="loading">
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
        <div v-if="isloading">
            <van-loading size="24px" vertical text-color="#0094ff" color="#0094ff"
                >加载中...</van-loading
            >
        </div>
        <div v-if="none" class="none">
            <img src="../assets/images/period.png" alt="" />
        </div>
    </div>
</template>

<script>
import _ from "lodash";
export default {
    props: {
        keyword: {
            type: String,
            default: "0",
        },
    },
    data() {
        return {
            AllLabel: [], //分类筛选
            searchClassify: [],
            ordersActive: -1,
            stylesActive: -1,
            areasActive: -1,
            statusActive: -1,
            pricesActive: -1,
            isOrders: false,
            isStyles: false,
            isThress: false,
            none: false,
            isloading: false,
            loading: true,
            styleId: -1,
            areaId: -1,
            isFinish: -1,
            order: -1,
            isFree: -1,
            pageNum: 1,
            totle: 0,
        };
    },
    created() {
        this.getAllLabel();
        this.getSearchClassify();
    },
    mounted() {
        window.addEventListener("scroll", this.windowScroll);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.windowScroll);
    },
    methods: {
        async getAllLabel() {
            await this.axios.get("AllLabel").then((res) => {
                this.AllLabel = res;
            });
        },
        async getSearchClassify(pageSize = 20) {
            await this.axios
                .get(
                    `Search?styleId=${this.styleId}&areaId=${this.areaId}&isFinish=${this.isFinish}&order=${this.order}&pageNum=1&pageSize=${pageSize}&isFree=${this.isFree}&keyWord=${this.keyword}`
                )
                .then((res) => {
                    this.totle = 0;
                    this.searchClassify = res.list;
                    this.totle = res.total_num;
                    this.isloading = false;
                    this.loading = false;
                    //处理高亮
                    let str = `style="color:#32a9fb"`;
                    let reg = new RegExp(`class="keyword"`, "gi");
                    this.searchClassify.forEach((v, i) => {
                        return (this.searchClassify[i].title = v.title.replace(reg, str));
                    });
                    this.searchClassify.forEach((v, i) => {
                        let arr = [];
                        for (let j = 0; j < v.author_name.length; j++) {
                            arr = this.searchClassify[i].author_name[j] = v.author_name[j].replace(
                                reg,
                                str
                            );
                        }
                        return arr;
                    });

                    if (this.searchClassify.length == 0) {
                        this.none = true;
                    } else {
                        this.none = false;
                    }
                });
        },
        more() {
            this.pageNum++;
            let pageSize = this.pageNum * 20;
            this.isloading = true;
            if (pageSize > 100) {
                this.isloading = false;
                return;
            }
            if (this.totle < pageSize) {
                this.isloading = false;
                window.removeEventListener("scroll", this.windowScroll);
                return;
            }
            this.getSearchClassify(pageSize);
        },
        windowScroll: _.throttle(function () {
            //卷去的距离
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            scrollTop = Math.ceil(scrollTop);
            //页面的高度
            let contentHight = document.body.scrollHeight;
            //窗口内容的高度
            let clientHeight = window.innerHeight;
            if (scrollTop + clientHeight >= contentHight) {
                this.more();
            }
        }, 1000),

        showOrders() {
            this.isOrders = !this.isOrders;
            if (this.isStyles == true || this.isThress == true) {
                this.isOrders = true;
                this.isStyles = false;
                this.isThress = false;
            }
        },
        showStyles() {
            this.isStyles = !this.isStyles;
            if (this.isOrders == true || this.isThress == true) {
                this.isStyles = true;
                this.isOrders = false;
                this.isThress = false;
            }
        },
        showThress() {
            this.isThress = !this.isThress;
            if (this.isStyles == true || this.isOrders == true) {
                this.isThress = true;
                this.isStyles = false;
                this.isOrders = false;
            }
        },
        changeOrdersAll() {
            this.ordersActive = -1;
            this.order = -1;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },
        changeOrders(index, id) {
            this.ordersActive = index;
            this.order = id;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },

        changeStylesAll() {
            this.stylesActive = -1;
            this.styleId = -1;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },
        changeStyles(index, id) {
            this.stylesActive = index;
            this.styleId = id;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },

        changeAreaAll() {
            this.areasActive = -1;
            this.areaId = -1;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },
        changeArea(index, id) {
            this.areasActive = index;
            this.areaId = id;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },

        changeStatusAll() {
            this.statusActive = -1;
            this.isFinish = -1;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },
        changeStatus(index, id) {
            this.statusActive = index;
            this.isFinish = id;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },

        changePricesAll() {
            this.pricesActive = -1;
            this.isFree = -1;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },
        changePrices(index, id) {
            this.pricesActive = index;
            this.isFree = id;
            this.searchClassify = [];
            this.loading = true;
            this.getSearchClassify();
        },
    },
};
</script>

<style lang="scss" scoped>
.search_result {
    position: relative;
    .search_nav {
        display: flex;
        text-align: center;
        justify-content: space-around;
        padding: 20px 0px 15px 0;
        border-bottom: 1px solid #e9e9e9;
        .nav_info {
            display: flex;
            align-content: center;
            .active {
                color: #32a9fb;
            }
            .iconfont {
                padding-left: 5px;
                padding-top: 3px;
                font-size: 12px;
            }
            ul {
                position: absolute;
                top: 60px;
                left: 0;
                display: flex;
                flex-wrap: wrap;
                background: #fff;
                z-index: 100;

                li {
                    padding-left: 30px;
                    padding-right: 20px;
                    margin: 10px 0;
                }
                .active {
                    color: #32a9fb;
                }
            }

            .areas {
                position: absolute;
                top: 60px;
                left: 0;
                display: flex;
                flex-wrap: wrap;
                background: #fff;

                li {
                    padding-left: 30px;
                    padding-right: 5px;
                }
                .active {
                    color: #32a9fb;
                }
            }
            .status {
                position: absolute;
                top: 95px;
                left: 0;
                background: #fff;

                li {
                    padding-left: 30px;
                    padding-right: 5px;
                }
                .active {
                    color: #32a9fb;
                }
            }
            .prices {
                position: absolute;
                top: 125px;
                left: 0;
                background: #fff;

                li {
                    padding-left: 30px;
                    padding-right: 5px;
                }
                .active {
                    color: #32a9fb;
                }
            }
        }
    }

    .result_item {
        padding-bottom: 20px;
        .search_content {
            display: flex;
            padding: 0 20px;
            margin-top: 15px;
            .left {
                img {
                }
            }
            .right {
                flex: 1;
                padding-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                h3 {
                    font-weight: bold;
                    padding-top: 5px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 70%;
                }
                .right_xia {
                    opacity: 0.8;
                    font-size: 12px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    width: 87%;
                    .name {
                        display: inline-block;
                        padding-right: 5px;
                        font-size: 12px;
                    }

                    span {
                    }
                }
            }
        }
    }
    .none {
        position: absolute;
        left: 0;
        right: 0;
        top: 200px;
        text-align: center;
    }
    .loading {
        position: absolute;
        left: 0;
        right: 0;
        top: 300px;
    }
}
</style>
